<template>
    <div>
        <header>
            <a href="javascript:;" class="left">
                <i class="iconfont icon-up21" @click="jump"></i>
            </a>
            <p>个人信息管理</p>
            <a href="javascript:;" class="right">
                <i class="iconfont icon-kefu1"></i>
            </a>
        </header>
        <div class="main">
            <ul class="block">
                <li>
                    <div class="itmes">
                        <div class="itmes_title">用户昵称</div>
                        <p class="itmes_infos">
                            <input type="text" name="username" value="" placeholder="用户昵称">
                        </p>
                    </div>
                </li>
                <li>
                    <div class="itmes">
                        <div class="itmes_title">真实姓名</div>
                        <p class="itmes_infos">
                            <input type="text" name="truename" value="" placeholder="请填入真实有效的姓名">
                        </p>
                    </div>
                </li>
                <li>
                    <div class="itmes">
                        <div class="itmes_title">用户性别</div>
                        <p class="itmes_infos label_radio">
                            <label class="label-checkbox">
                                <input type="radio" name="sex" value="2" checked="">
                                男
                            </label>
                            <label class="label-checkbox">
                                <input type="radio" name="sex" value="1">
                                女
                            </label>
                            <label class="label-checkbox">
                                <input type="radio" name="sex" value="0">
                                保密
                            </label>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="itmes">
                        <div class="itmes_title">出生日期</div>
                        <p class="itmes_infos">
                            <input type="text" name="birthday" :value="date" @click="show = true" placeholder="请选择出生日期">
                            <van-calendar v-model="show" @confirm="onConfirm" close-on-popstate/>
                            <!-- <van-cell title="选择出生日期" :value="date" @click="show = true" />
                            <van-calendar v-model="show" @confirm="onConfirm" /> -->
                        </p>
                    </div>
                </li>
                <li>
                    <div class="itmes">
                        <div class="itmes_title">所在地区</div>
                        <p class="itmes_infos" @click="isshow=true">
                            <input type="text" name="areainfo" placeholder="请选择所在地区" value="">
                        </p>
                    </div>
                </li>
                <li>
                    <div class="itmes">
                        <div class="itmes_title">通信地址</div>
                        <p class="itmes_infos">
                            <input type="text" name="address" value="" placeholder="输入有效收货人详细地址">
                        </p>
                    </div>
                </li>
            </ul>
            <!-- <van-area 
                title="选择所在地址" 
                :area-list="areaList" 
                :columns-placeholder="['请选择', '请选择', '请选择']"
                value="110101" 
                
            /> -->
        </div>
        <footer v-if="!show">
            <button @click="handlexg">确认修改</button>
        </footer>
    </div>
</template>

<script>

import Vue from 'vue';
import {Toast} from 'vant'
import { Calendar } from 'vant';
import { Area } from 'vant';
import { areaList } from '@vant/area-data';

Vue.use(Calendar,Area,areaList);
Vue.use(Calendar);

export default {
  data() {
    return {
      date: '',
      show: false,
      isshow:false,
      areaList,
    };
  },
  methods: {
    jump() {
        this.$router.push("/myspec");
    },
    handlexg(){
        Toast('修改成功')
        console.log();
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>

<style src="../assets/font/iconfont.css" scoped></style>
<style lang="less" scoped>
    header{
        width: 375px;
        height:50px;
        background-color: #00bf9d;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
    }
    header .left{
        width: 30px;
        height: 33px;
        line-height: 33px;
        padding-left: 10px; 
    }
    header .left .iconfont{
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        margin: 0 0 0 10px !important;
    }
    header p{
        width: 260px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        font-size: 22px;
        color: #fff;
        margin: 0 10px;
    }
    header .right{
        width: 40px;
        height: 40px;
        font-size: 26px;
        text-align: left;
        line-height: 40px;
        margin-right: 10px;
        /* float: left; */
    }
    header .right .iconfont{
        font-size: 35px;
        color: #fff;
        margin: 0 10px 0 0 !important;
    }
    .main{
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 50px;
        // overflow-x: hidden;
        // overflow-y: scroll;
        // margin: auto;
        background: #f5f5f5;
    }
    .block {
        background: #fff;
        margin: 0;
    }
    .block>li {
        padding: 16px 10px;
        border-bottom: 1px solid #eee;
    }
    .itmes{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .itmes_title{
        width: 35%;
        color: #666;
    }
    .block .itmes .itmes_infos {
        width: 65%;
        margin: 0;
        position: relative;
    }
    .block .itmes .itmes_infos>input {
        width: 100%;
        font-size: 16px;
        line-height: 19.2px;
        border: 0;
        color: #333;
    }
    .block .itmes .itmes_infos.label_radio>label {
        margin-right: 20px;
    }
    footer{
        background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        border-top: 1px solid #eee;
    }
    footer button{
        background-color: #f60;
        border: 0;
        width: 100%;
        height: 50px;
        line-height: 48px;
        display: inline-block;
        color: #fff;
        position: fixed;
        bottom: 0;
    }
</style>